<template>
  <!-- 页面标题栏 -->
  <view class="header">
    <text class="title">显示图片</text>
  </view>

  <!-- 图片显示区域（圆形裁剪） -->
  <view class="image-container">
    <image 
      :src="imageUrl" 
      class="avatar" 
      mode="widthFix"
    />
  </view>

  <!-- 按钮区域 -->
  <view class="btn-group">
    <button @click="chooseImage" class="btn">选择图片显示</button>
    <button @click="previewImage" class="btn" :disabled="!imageUrl">预览图片</button>
    <button @click="getImageInfo" class="btn" :disabled="!imageUrl">获取图片信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 存储选中图片的临时路径
    };
  },
  methods: {
    // 选择图片并显示
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0];
        }
      });
    },

    // 预览图片
    previewImage() {
      uni.previewImage({
        urls: [this.imageUrl]
      });
    },

    // 获取图片信息
    getImageInfo() {
      uni.getImageInfo({
        src: this.imageUrl,
        success: (info) => {
          uni.showModal({
            title: '图片信息',
            content: `尺寸：${info.width}×${info.height}\n类型：${info.type}\n路径：${info.path}`,
            showCancel: false
          });
        }
      });
    }
  }
};
</script>

<style scoped>
/* 标题栏样式 */
.header {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

/* 图片容器（圆形裁剪） */
.image-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}

/* 按钮组样式 */
.btn-group {
  padding: 0 20px;
}
.btn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-bottom: 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}
.btn:disabled {
  opacity: 0.6;
}
</style>